<template>
	<view class="container">

		<view class="head">
			<view class="head_city_search">
				<view class="head_city" @tap="select_city">
					<image class="head_city_area" src="/static/images/city.png"></image>
					<!-- <view class="head_city_name">{{city.name}}</view> -->
					<view class="head_city_name">{{city}}</view>
				</view>
				<view class="head_search" @tap="search_result">
					<!-- <image class="search_icon" src="/static/images/search.png"></image> -->
					<input class="head_search_inp" placeholder="搜索門店" placeholder-style="color:#999;font-size:26rpx;" />
				</view>
			</view>
			<view class="head_member">
				<view class="member_name">
					<view class="member_name_text">{{userInfo.nickname || "會員名稱"}} | {{userInfo.mobile || "ID"}} |
						會員卡號:{{userInfo.vip_number}}</view>
					<view class="member_register" v-if="!token" @tap="member_registration">立即註冊</view>
					<!-- <view class="member_lv" v-else>{{userInfo.vip_name || "會員等級"}}</view> -->
				</view>
				<view class="member_data">
					<view @tap="ticket_roll">電子票卷 {{userInfo.coupons_2}}</view>
					<view @tap="discount_coupon">優惠劵 {{userInfo.coupons_1}}</view>
					<view @tap="toBalance">賬戶餘額 ${{userInfo.balance}}</view>
				</view>
			</view>

		</view>

		<!-- 輪播圖 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-active-color="#39B19D">
				<swiper-item v-for="item in banner_list" :key="item.id">
					<view class="swiper-item uni-bg-green">
						<image :src="item.image" mode=""></image>
						<!-- <u-image :src="item.image" mode="aspectFit" :lazy-load="true"></u-image> -->
					</view>
				</swiper-item>

			</swiper>
		</view>

		<!-- 常见问题 && 我要加盟 -->
		<view class="fun_btns">
			<view class="fun_btns_item" :class="{active:token}" @tap="common_question">
				<image class="fun_btns_img" src="/static/images/wenhao.png"></image>
				<text>常見問題</text>
			</view>
			<view class="fun_btns_item" v-if="token" :class="{active:token}" @tap="scan_code">
				<image class="fun_btns_img" src="/static/images/saoma.png"></image>
				<text>掃碼登入</text>
			</view>
			<view class="fun_btns_item" :class="{active:token}" @tap="common_want_join">
				<image class="fun_btns_img" src="/static/images/jiameng_2.png"></image>
				<text>我要加盟</text>
			</view>
		</view>

		<view class="notice" @tap="showNotice=true">
			<image class="notice_img" src="/static/images/gonggao.png"></image>
			<!-- <text>雀實好玩24h自助共享棋牌室免責聲明：</text> -->
			<!-- <text>{{notice[0]}}</text> -->
			<u-notice-bar :text="notice" direction="column" bgColor="#F3F5F9" icon="" color="#000"
				duration="5000"></u-notice-bar>
		</view>


		<!-- 篩選 -->
		<view :class="'tabTit box  ' + (navFixed ? 'positionFixed' : '')">
			<!-- <view class="tabTit box"> -->
			<view :class="'flex1' + (!tab[index] ? ' active' : '')" :data-index="index" @tap="filterTab(index)"
				v-for="(item, index) in tabTxt" :key="index">
				<text>{{ item }}</text>

				<!-- <image src="/static/images/arrow1.png"></image> -->
				<image src="/static/images/shanglajiantou1.png"></image>


				<!-- <image wx-if="{{!tab_active[index]?' active':''}}"   src="/images/arrow.png"></image>
		    <image wx-else src="/images/arrow1.png" style="{{tab_active[index]?'HiddenDiv':''}}"></image> -->
			</view>
		</view>

		<!-- 篩選項 -->
		<view class="tabLayer" v-show="showTabLayer1">
			<text @tap.stop="check_tab(item)" v-for="item in tabLayer1" :key="item"
				:class="{active:tabTxt[0]==item}">{{item}}</text>
		</view>
		<view class="tabLayer" v-show="showTabLayer2">
			<text :class="{active:checkDistanceText == item}" v-for="item in tabLayer2" :key="item"
				@tap.stop="check_distance(item)">{{item}}</text>
		</view>
		<view class="tabLayer" v-show="showTabLayer3">
			<text :class="{active:checkPriceText==item}" v-for="item in tabLayer3" :key="item"
				@tap.stop="check_price(item)">{{item}}</text>
		</view>
		<view class="tabLayer" v-show="showTabLayer4">
			<text :class="{active:checkFilterLabel==item.title}" v-for="item in filter_labels" :key="item.id"
				@tap.stop="check_label(item)">{{item.title}}</text>
		</view>

		<!-- 首頁展示列表 -->
		<scroll-view :scroll-y="true" @scroll="layoutScroll">
			<view class="container_list" v-if="store_list.length">

				<view class="list_item" @tap="shop_details(item)" v-for="(item,index) in store_list" :key="item.id">
					<view class="list_item_img">
						<!-- <image :src="item.image" mode="scaleToFill"></image> -->
						<u-image :src="item.image" mode="scaleToFill" :lazy-load="true"></u-image>

						<text v-if="item.is_room">有房</text>
						<text v-else>無房</text>
					</view>
					<view class="list_item_info">
						<view class="">
							<view class="info_name">
								<text>{{item.name}}</text>
								<!-- <view class="_mobile" @tap.stop="call(item)">{{item.mobile}}</view> -->
								<view class="_mobile" @tap.stop="call(item)">
									<image src="/static/images/dianhua.png"></image>
									<text>致電店家客服</text>
								</view>
							</view>
							<view class="info_label">
								<view v-for="(labelItem,index) in item.label" :key="index">{{labelItem}}</view>
							</view>
							<view class="info_address">
								<image src="/static/images/ot_2.png"></image>
								<text>{{item.address}}</text>
							</view>
							<view class="info_time">
								<image src="/static/images/shijian_o.png"></image>
								<text>營業時間：{{item.open}}-{{item.close}}</text>
							</view>
						</view>

						<view class="btns">
							<view class="btns_distance">距我{{item.distance}}</view>
							<!-- <view class="btns_book" @tap.stop="book_now(item)">立即預訂</view> -->
							<view class="btns_book">立即預訂</view>
							<image @tap.stop="toMap(item)" src="/static/images/address.png"></image>
							<!-- <image @tap.stop="call(item)" src="/static/images/phone.png"></image> -->
						</view>

					</view>

				</view>
				<u-modal :show="showCall" confirmText="確認" cancelText="取消" @confirm="confirmCall"
					@cancel="showCall=false" @close="showCall=false" :closeOnClickOverlay="true"
					:showCancelButton="true" :content='content'></u-modal>

			</view>
			<view style="text-align: center;padding: 20rpx 0;background: #fff;" v-else>暫無數據</view>
		</scroll-view>


		<!-- 公告彈框 -->
		<u-popup bgColor="transparent" :show="showNotice" mode="center" @close="showNotice=false" round="16rpx">
			<view class="notice_popup">
				<view v-for="(item,index) in notice" :key="index">{{item}}</view>
			</view>
		</u-popup>

		<view class="">
			<u-tabbar :value="tabbarValue" activeColor="#39B19D" :safeAreaInsetBottom="false" :placeholder="false">
				<u-tabbar-item @click="tabbarClick" v-for="(item,index) in tabber" :key="index" :text="item.text">
					<image class="u-page__item__slot-icon" slot="active-icon" :src="item.inactiveImg"></image>
					<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.activeImg"></image>
				</u-tabbar-item>
			</u-tabbar>
		</view>

		<!-- 新版本彈窗 -->
		<!-- <u-popup></u-popup> -->

	</view>

</template>

<script>
	import store from "@/store/index.js"
	import {
		getOpenCity,
		storesList,
		getSwiperList,
		getLabelList,
		getCityAll,
		getVersion,
		getDownloadApp
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/api/me.js'
	import {
		hotUpdate
	} from '@/utils/hotUpdate.js';
	import baseURL from "../../utils/baseURL";

	const app = getApp();
	export default {
		data() {
			return {
				indicatorDots: true,
				vertical: true,
				autoplay: true,
				interval: 5000,
				duration: 500,

				//滑动的距离
				navFixed: false,

				// 首頁列表
				tabTxt: ['智能排序', '距離', '價格', '篩選'],
				tabLayer1: ["價格高->低", "價格低->高", "離我最近"],
				tabLayer2: ["不限", "0-3km", "3km-5km", "5km-10km", "10km以上"],
				tabLayer3: ["不限", "從高到低", "從低到高"],
				checkDistanceText: "不限",
				checkPriceText: "不限",
				checkFilterLabel: "篩選",
				showTabLayer1: false,
				showTabLayer2: false,
				showTabLayer3: false,
				showTabLayer4: false,

				//分类
				tab: [true, true, true, true],

				tab_active: [true, true, true, true],

				city: "",
				// 輪播圖
				banner_list: [],
				// 公告
				notice: [],
				showNotice: false,
				openCity: [],
				current_city_id: "",

				// 門店列表
				store_list: [],
				// 經度
				lon: "",
				// 維度
				lat: "",

				// 篩選條件--距離
				distance_where: [],
				// 篩選條件--價格
				price_sort: "",

				// 篩選標籤列表
				filter_labels: [],
				label_id: "",
				userInfo: {},
				showCall: false,
				content: '',
				token: null,
				tabber: [{
						text: '首頁',
						activeImg: '/static/images/shouyefill.png',
						inactiveImg: '/static/images/shouyefill1.png',
					},
					{
						text: '訂單',
						activeImg: '/static/images/my_order.png',
						inactiveImg: '/static/images/my_order1.png',
					},
					{
						text: '我的',
						activeImg: '/static/images/wodedamaijihuo1.png',
						inactiveImg: '/static/images/wodedamaijihuo.png',
					},
				],
				tabbarValue: 0,
				platform: '',
				showGetLocation: false,
				testAddress: '',
				testAddress1: '',
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// hotUpdate()
			/*
			const system = plus.os.name
			let downloadUrl
			if (flag.isUpdate) {
				getDownloadApp().then(res => {
					downloadUrl = baseURL + res.data
					uni.showModal({
						title: '更新提示',
						content: '發現新版本，請立即更新！',
						showCancel: true,
						confirmText: '立即更新',
						success: (res) => {
							if (res.confirm) {
								if (system === 'Android') {
									plus.runtime.openURL(downloadUrl, '_blank', {

									})
								} else if (system === 'iOS') {
									this.goToAppStoreForUpdate()
								}
							}
						}
					})
				})
			}
			*/
			// #endif


			// 獲取經緯度
			this.getLocationFn()

			// 獲取開通城市
			getOpenCity().then(res => {
				this.openCity = res.data
			})

			getSwiperList().then(res => {
				this.banner_list = res.data.banner_list
				this.notice = res.data.notice[0].split("\r\n")
			})

			// 獲取篩選標籤
			getLabelList().then(res => {
				this.filter_labels = res.data
			})

			uni.getSystemInfo({
				success: (res) => {
					// console.log(res.platform,'客戶端平臺')
					this.platform = res.platform
				}
			})
		},
		onShow() {
			this.token = uni.getStorageSync('ONEtoken')
			// console.log(this.token)
			// console.log(store.state.city, "vuex")
			if (store.state.city.name !== "") {
				this.city = store.state.city.name
				this.current_city_id = store.state.city.id
			}

			getUserInfo().then(res => {
				// console.log(res.data, "用戶信息")
				this.userInfo = res.data
			})


		},
		methods: {
			goToAppStoreForUpdate() {
				const appleId = ''
				const appStoreUrl = `items-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
				plus.runtime.launchApplication({
					action: appStoreUrl,
					success: () => {

					},
					fail: (err) => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
					}
				})
			},

			getLocationFn() {
				let _this = this

				// #ifdef H5
				uni.getLocation({
					//定位类型 wgs84, gcj02
					// type: "gcj02",
					type: "wgs84",
					geocode: true,
					success: function(res) {
						console.log("獲取成功", res)
						// uni.showToast({
						// 	title:'獲取成功'
						// })
						// _this.showGetLocation = false
						_this.showGetLocation = true
						let lon = res.longitude
						let lat = res.latitude
						_this.lon = res.longitude
						_this.lat = res.latitude
						_this.testAddress = res
						// _this.analysisLocation(lat, lon)

						_this.H5GetLocationFn(lat, lon)
						// _this.H5GetLocationFn(24.17, 120.65)
						// _this.H5GetLocationFn(22.82,108.37)

						// uni.request({
						// 	header: {
						// 		'Content-Type': 'application/text',
						// 	},
						// 	url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${lon},${lat}&key=856097ce8c30f6af1c35a02bfcc70b74`,
						// 	success(res) {
						// 		_this.city = res.data.regeocode.addressComponent.city
						// 		_this.testAddress1 = res.data.regeocode
						// 		let obj = _this.openCity.find(item => item.name == _this.city)
						// 		if (obj) {
						// 			_this.current_city_id = obj.id
						// 		}
						// 		storesList({
						// 			lat: lat,
						// 			lon: lon,
						// 			city_id: _this.current_city_id
						// 		}).then(res => {
						// 			_this.store_list = res.data
						// 		})
						// 	}
						// })

					},
					fail: function() {
						// console.log("獲取失敗")
						uni.showToast({
							title: '獲取失敗',
							icon: 'error',
							duration: 2000
						})
					}
				})
				// #endif

				// #ifdef APP-PLUS
				if (plus.os.name == 'Android') {
					this.appGetLocationFn('gcj02')
				} else {
					this.appGetLocationFn('wgs84')
				}
				// #endif

			},
			appGetLocationFn(type) {
				uni.getLocation({
					type: type,
					geocode: true,
					success: (res) => {
						let lon = res.longitude
						let lat = res.latitude
						this.lon = res.longitude
						this.lat = res.latitude

						let obj = this.openCity.find(item => item.name == this.city)
						if (obj) {
							this.current_city_id = obj.id
						}
						this.city = res.address.city
						// })
						storesList({
							lat: lat,
							lon: lon,
							city_id: this.current_city_id
						}).then(res => {
							this.store_list = res.data
							// console.log(res, "門店列表")
						})
					},
					fail: (err) => {
						console.log(err, '獲取失敗')
					}
				})
			},
			// 选项卡
			filterTab: function(key) {

				console.log(key)

				switch (key) {
					case 0:
						this.showTabLayer1 = !this.showTabLayer1;
						this.showTabLayer2 = false;
						this.showTabLayer3 = false;
						this.showTabLayer4 = false;
						this.tab.forEach((item, index) => {
							if (index == key) {
								this.$set(this.tab, key, !this.tab[key])
							} else {
								this.$set(this.tab, index, true)
							}
						})
						break;
					case 1:
						this.showTabLayer2 = !this.showTabLayer2;
						this.showTabLayer1 = false;
						this.showTabLayer3 = false;
						this.showTabLayer4 = false;
						this.tab.forEach((item, index) => {
							if (index == key) {
								this.$set(this.tab, key, !this.tab[key])
							} else {
								this.$set(this.tab, index, true)
							}
						})
						break;
					case 2:
						this.showTabLayer3 = !this.showTabLayer3;
						this.showTabLayer1 = false;
						this.showTabLayer2 = false;
						this.showTabLayer4 = false;
						this.tab.forEach((item, index) => {
							if (index == key) {
								this.$set(this.tab, key, !this.tab[key])
							} else {
								this.$set(this.tab, index, true)
							}
						})
						break;
					case 3:
						this.showTabLayer4 = !this.showTabLayer4;
						this.showTabLayer1 = false;
						this.showTabLayer2 = false;
						this.showTabLayer3 = false;
						this.tab.forEach((item, index) => {
							if (index == key) {
								this.$set(this.tab, key, !this.tab[key])
							} else {
								this.$set(this.tab, index, true)
							}
						})
						break;
				}

			},
			check_tab: function(key) {
				this.$set(this.tabTxt, 0, key)
				this.showTabLayer1 = false
				this.$set(this.tab, 0, true)
				// console.log(key,"1111")

				if (key == "價格高->低") {
					this.price_sort = "desc"
				} else if (key == "價格低->高") {
					this.price_sort = "asc"
				} else {
					this.distance_where.push(0)
				}

				storesList({
					lat: this.lat,
					lon: this.lon,
					city_id: this.current_city_id,
					distance_where: this.distance_where ? this.distance_where.join(",") : "",
					// distance_where:"3,5"
					order_price: this.price_sort,
					label_id: this.label_id
				}).then(res => {
					this.store_list = res.data
					// console.log(res,"門店列表")
				})

			},
			check_distance: function(key) {
				this.checkDistanceText = key
				this.$set(this.tabTxt, 1, key)
				this.showTabLayer2 = false

				this.$set(this.tab, 1, true)

				this.distance_where = this.checkDistanceText.match(/\d+/g)
				// console.log(this.distance_where, "2222")


				storesList({
					lat: this.lat,
					lon: this.lon,
					city_id: this.current_city_id,
					distance_where: this.distance_where ? this.distance_where.join(",") : "",
					// distance_where:"3,5"
					order_price: this.price_sort,
					label_id: this.label_id
				}).then(res => {
					this.store_list = res.data
					// console.log(res,"門店列表")
				})


			},
			check_price: function(key) {
				this.checkPriceText = key
				this.$set(this.tabTxt, 2, key)
				this.showTabLayer3 = false
				this.$set(this.tab, 2, true)

				// desc--降序  asc--升序
				// this.price_sort
				if (key == "不限") {
					this.price_sort = ""
				} else if (key == "從高到低") {
					this.price_sort = "desc"
				} else {
					this.price_sort = "asc"
				}

				storesList({
					lat: this.lat,
					lon: this.lon,
					city_id: this.current_city_id,
					distance_where: this.distance_where ? this.distance_where.join(",") : "",
					order_price: this.price_sort,
					label_id: this.label_id
				}).then(res => {
					this.store_list = res.data
					// console.log(res,"門店列表")
				})
			},

			check_label: function(key) {
				this.checkFilterLabel = key.title
				this.$set(this.tabTxt, 3, key.title)
				this.showTabLayer4 = false
				this.$set(this.tab, 3, true)

				// console.log(key, "標籤信息")
				this.label_id = key.id


				storesList({
					lat: this.lat,
					lon: this.lon,
					city_id: this.current_city_id,
					distance_where: this.distance_where ? this.distance_where.join(",") : "",
					order_price: this.price_sort,
					label_id: this.label_id
				}).then(res => {
					this.store_list = res.data
					// console.log(res,"門店列表")
				})


			},


			// 監聽首頁數據列表滑動
			layoutScroll: function() {},

			search_result: function() {
				uni.navigateTo({
					url: `/pages/search_info/search_info?lon=${this.lon}&lat=${this.lat}`
				})
			},
			common_want_join: function() {

				if (uni.getStorageSync('ONEtoken') !== "") {
					uni.navigateTo({
						url: "/pages/want_join/want_join"
					})
				} else {
					uni.showToast({
						title: "請先登陸",
						icon: 'none',
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login_register/login_register?flag=0"
						}, 1000)
					})
				}

				// uni.navigateTo({
				// 	url: "/pages/want_join/want_join"
				// })
			},

			member_registration: function() {
				uni.navigateTo({
					url: "/pages/login_register/login_register?flag=1"
				})
			},
			shop_details: function(obj) {
				uni.navigateTo({
					url: `/pages/shop_details/shop_details?obj=${encodeURIComponent(JSON.stringify(obj.id))}`
				})
			},
			select_city: function() {
				uni.navigateTo({
					url: `/pages/select_city/select_city?city=${this.city}`
				})
			},
			book_now(obj) {
				// 判斷是否已經登陸
				if (uni.getStorageSync('ONEtoken') !== "") {
					uni.navigateTo({
						url: `/pages/book_now/book_now?obj=${obj}`
					})
				} else {
					uni.showToast({
						title: "請先登陸",
						icon: 'none',
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login_register/login_register?flag=0"
						}, 1000)
					})
				}


			},
			common_question() {
				uni.navigateTo({
					url: "/pages/index/common_question/common_question"
				})
			},

			ticket_roll() {
				uni.navigateTo({
					url: "/pages/electronic_ticket_roll/electronic_ticket_roll"
				})
			},
			discount_coupon() {
				uni.navigateTo({
					url: "/pages/discount_coupon/discount_coupon"
				})
			},
			call(item) {
				// console.log(item, "call")
				this.showCall = true
				this.content = item.mobile
			},
			confirmCall() {
				uni.makePhoneCall({
					phoneNumber: this.content
				})
			},
			scan_code() {
				/*#ifdef APP-PLUS */
				let platform = uni.getSystemInfoSync().platform

				// if (platform === 'android') {
				// 	plus.android.requestPermissions(['android.permission.CAMERA'], (e) => {
				// 		if (e.deniedAlways.length > 0) {
				// 			// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
				// 			uni.showModal({
				// 				title: '提示',
				// 				content: '請打開手機相機功能(點擊確定後在權限中授權相機功能)',
				// 				success: (res) => {
				// 					if (res.confirm) {
				// 						var Intent = plus.android.importClass('android.content.Intent')
				// 						var Settings = plus.android.importClass(
				// 							'android.provider.Settings')
				// 						var Uri = plus.android.importClass('android.net.Uri')
				// 						var mainActivity = plus.android.runtimeMainActivity()
				// 						var intent = new Intent()
				// 						intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
				// 						var uri = Uri.fromParts('package', mainActivity
				// 							.getPackageName(), null)
				// 						intent.setData(uri)
				// 						mainActivity.startActivity(intent)
				// 					}
				// 				}
				// 			})
				// 		}
				// 	})
				// }

				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: (res) => {
						// console.log(res.result, '掃碼成功')
						uni.navigateTo({
							url: `/pages/index/scan_login/scan_login?${res.result}`
						})
					}
				})
				/*#endif*/

				/*#ifdef H5*/
				uni.showToast({
					title: '請使用app操作',
					icon: 'none'
				})
				/*#endif */

			},
			tabbarClick(e) {
				this.token = uni.getStorageSync('ONEtoken')
				switch (e) {
					case 1:
						if (this.token) {
							uni.reLaunch({
								url: '/pages/order/order'
							})
						} else {
							uni.navigateTo({
								url: "/pages/login_register/login_register?flag=0"
							})
						}
						break;
					case 2:
						if (this.token) {
							uni.reLaunch({
								url: '/pages/me/me'
							})
						} else {
							uni.navigateTo({
								url: "/pages/login_register/login_register?flag=0"
							})
						}
						break;
				}
			},
			toMap(item) {
				console.log(item, '查看')
				// #ifdef H5
				const that = this
				uni.showActionSheet({
					title: '選擇系統中已安裝的地圖應用導航',
					itemList: ['騰訊地圖', '百度地圖', '高德地圖'],
					success: (e) => {
						let url = ''
						let iosDownloadUrl = ''
						let andriodDownloadUrl = ''
						switch (e.tapIndex) {
							case 0:
								url = `qqmap://map/geocoder?coord=${item.lat},${item.lon}&addr=${item.address}`
								break;
							case 1:
								url =
									`baidumap://map/marker?location=${item.lat},${item.lon}&title=${item.address}&content=${item.address}&src=ios.baidu.openAPIdemo&coord_type=gcj02`
								break;
							case 2:
								if (this.platform == 'ios') {
									url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${item.address}&lat=${item.lat}&lon=${item.lon}&dev=0`
								} else {
									url =
										`androidamap://viewMap?sourceApplication=applicationName&poiname=${item.address}&lat=${item.lat}&lon=${item.lon}&dev=0`
								}
								break;
							default:
								break;
						}
						if (url != '') {
							url = encodeURI(url)
							window.Location.href = url
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
				// #endif

				// #ifndef H5
				// uni.openLocation({
				// 	// longitude: item.lon,
				// 	longitude: 110,
				// 	// latitude: item.lat,
				// 	latitude: 22,
				// 	// name: item.address,
				// 	// address: item.address,
				// 	success: (res) => {
				// 		console.log(res, '成功')
				// 	},
				// 	fail: (err) => {
				// 		console.log(err, '失敗')
				// 	}
				// })

				this.navGoogleMap(item.lat + ',' + item.lon)

				// #endif
			},
			navGoogleMap(latLng) {
				console.log(latLng)
				let that = this
				// 應用地址
				let url = ''
				// android 包名
				let pname = ''
				// ios id
				let appid
				if (plus.os.name == 'Android') {
					plus.nativeUI.actionSheet({
						title: '選擇地圖應用',
						cancel: '取消',
						buttons: [{
							title: 'Google'
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = 'google.navigation:q=' + latLng
								// pname = 'com.android.vending'
								pname = 'com.google.android.apps.maps'
								break;
						}
						if (url) {
							plus.runtime.openURL(url, function() {
								plus.nativeUI.actionSheet({
									title: '應用市場',
									cancel: '取消',
									buttons: [{
										title: '應用市場'
									}]
								}, function({
									index
								}) {
									switch (index) {
										case 1:
											plus.runtime.openURL('market://details?id=' + pname,
												function() {
													plus.nativeUI.alert('本機未安裝指定的應用')
												})
									}
								})
							})
						}
					})
				} else {
					plus.nativeUI.actionSheet({
						title: '選擇地圖應用',
						cancel: '取消',
						buttons: [{
							title: 'Google'
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = 'comgooglemaps://?saddr=&daddr=' + latLng
								appid = 585027354
								break;
							default:
								break;
						}
						if (url != '') {
							plus.runtime.launchApplication({
								action: url
							}, function(err) {
								plus.nativeUI.actionSheet({
									title: '應用市場',
									cancel: '取消',
									buttons: [{
										title: '應用市場'
									}]
								}, function({
									index
								}) {
									switch (index) {
										case 1:
											plus.runtime.openURL(
												`itms-apps://itunes.apple.com/cn/app/id${appid}?mt=8`,
												function() {
													plus.nativeUI.alert('本機未安裝指定的應用')
												})
									}
								})
							})
						}
					})
				}
			},
			toBalance() {
				uni.navigateTo({
					url: '/pages/balance/balance'
				})
			},
			H5GetLocationFn(lat, lon) {
				uni.request({
					url: `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lon}&key=AIzaSyDw204L33tjHJqVMdmOLd6a9dCoA7OiVbY`,
					success: (res) => {
						// console.log(res,'定位111')
						console.log(res.data.results, '定位')
						this.getLocality(res.data.results, lat, lon)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			getLocality(arr, lat, lon) {
				let address = arr.filter(item => {
					// if (item.types.indexOf("administrative_area_level_3") !== -1) {
					// 	return item
					// }
					if (item.types.indexOf("administrative_area_level_2") !== -1) {
						return item
					}
					// if (item.types.indexOf("administrative_area_level_1") !== -1) {
					// 	return item
					// }
					// if (item.types.indexOf("postal_code") !== -1) {
					// 	return item
					// }
				})[0]
				console.log(address, '精準定位')
				if (address) {
					this.city = address.address_components[0].long_name
				}

				let obj = this.openCity.find(item => item.name == this.city)
				if (obj) {
					this.current_city_id = obj.id
				}
				// this.city = res.address.city
				// })
				storesList({
					lat: lat,
					lon: lon,
					city_id: this.current_city_id
				}).then(res => {
					this.store_list = res.data
					// console.log(res, "門店列表")
				})
			}
		},

		watch: {
			current_city_id(n, o) {
				storesList({
					lat: this.lat,
					lon: this.lon,
					city_id: n
				}).then(res => {
					this.store_list = res.data

				})
			}
		}

	}
</script>

<style lang="less" scoped>
	.container {
		background: #F3F5F9;
		min-height: calc(100vh - 90rpx);
		padding-bottom: 60px;
	}

	/*弹性盒模型*/
	.box {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		/* display: flex; */
		justify-content: space-evenly;
	}

	.head {

		width: 100%;
		// height: 230rpx;
		background: #39B19D;

		padding: 10rpx 32rpx;
		box-sizing: border-box;

		.head_city_search {
			display: flex;
			justify-content: space-between;

			.head_city {
				width: 141rpx;
				height: 48rpx;
				background: #FFFFFF;
				opacity: 1;
				border: 1rpx solid #39B19D;
				border-radius: 48rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;

				.head_city_area {
					width: 33rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}

				.head_city_name {
					font-size: 26rpx;
					font-weight: 400;
					color: #39B19D;
					margin-right: 18rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			}

			.head_search_inp {
				width: 441rpx;
				height: 48rpx;
				background: #FFFFFF;
				border-radius: 35rpx 35rpx 35rpx 35rpx;
				opacity: 1;
				border: 1rpx solid #39B19D;
				padding-left: 38rpx;
			}
		}

		.head_member {
			/* width: 688rpx; */
			width: 100%;
			// height: 170rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			margin-top: 15rpx;
			padding: 16rpx;
			box-sizing: border-box;

			.member_name {
				display: flex;
				justify-content: space-between;

				.member_name_text {
					font-size: 30rpx;
					font-weight: 400;
					color: #000;
				}

				.member_register {
					width: 133rpx;
					height: 54rpx;
					background: #39B19D;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					font-size: 24rpx;
					color: #fff;
					line-height: 54rpx;
					text-align: center;
				}
			}

			.member_lv {
				width: 114rpx;
				height: 45rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				border: 1rpx solid #39B19D;
				line-height: 45rpx;
				color: #39B19D;
				font-size: 24rpx;
				text-align: center;
			}

			.member_data {
				// width: 440rpx;
				font-size: 30rpx;
				color: #000;
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
			}
		}

	}

	// 輪播圖
	.uni-margin-wrap {
		margin-top: 20rpx;
		padding: 0 31rpx;
		box-sizing: border-box;
		border-radius: 16rpx;

		// overflow: hidden;
		.swiper {
			// width: 360px;
			width: 100%;
			height: 170px !important;
		}

		.swiper-item {
			// width: 688rpx;
			width: 100%;
			// height: 260rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			// overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 100%;
				// width: 360px;
				height: 150px;
				border-radius: 16rpx;
			}

			/deep/ .uni-swiper-dots {
				bottom: 0px !important;
			}

			// /deep/ .u-image{
			// 	// width: 690rpx !important;
			// 	// height: 360rpx !important;
			// 	width: 360px !important;
			// 	height: 200px !important;
			// }
			// /deep/ .u-image__image{
			// 	// width: 690rpx !important;
			// 	// height: 360rpx !important;
			// 	width: 360px !important;
			// 	height: 200px !important;
			// }
		}
	}



	// 修改轮播图指示器样式 
	// >>>uni-swiper .uni-swiper-dot{
	// 	width: 10rpx;
	// 	height: 10rpx;
	// }
	// >>>uni-swiper .uni-swiper-dot-active{
	// 	width: 30rpx;
	// 	height: 10rpx;
	// 	border-radius: 10rpx;
	// }
	/deep/ uni-swiper .uni-swiper-dot {
		width: 10rpx;
		height: 10rpx;
	}

	/deep/ uni-swiper .uni-swiper-dot-active {
		width: 30rpx;
		height: 10rpx;
		border-radius: 10rpx;
	}

	.fun_btns {
		margin-top: 15rpx;
		padding: 0 31rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.fun_btns_item {
			width: 319rpx;
			height: 119rpx;
			background: #F8FDFB;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			font-size: 30rpx;
			display: flex;
			align-items: center;

			.fun_btns_img {
				width: 56rpx;
				height: 54rpx;
				margin: 0 34rpx;
			}
		}

		.active {
			width: 30%;

			.fun_btns_img {
				margin: 0 10rpx;
			}
		}
	}

	.notice {
		// margin-top: 19rpx;
		display: flex;
		align-items: center;
		padding: 0 31rpx;

		.notice_img {
			width: 37rpx;
			height: 36rpx;
			margin-right: 9rpx;
		}

		text {
			flex: 1;
		}
	}

	.notice_popup {
		width: 90%;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;

		view {
			margin-bottom: 10rpx;
		}
	}




	.positionFixed {
		position: fixed;
		left: 0;
		top: 0;
		box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99;
		/*for Android*/
		-webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99;
		z-index: 12;
	}

	.positionFixed2 {
		position: fixed;
		left: 0;
		top: 70rpx;
		z-index: 12;
	}

	.tabTit {
		height: 90rpx;
		line-height: 90rpx;
		border-bottom: solid 1px #eee;
		// width: 750rpx;
		z-index: 12;
		/* position: fixed; */
		background: #fff;
		font-size: 15px;
		text-align: center;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 31rpx;
		box-sizing: border-box;

		text {
			font-size: 26rpx;
			font-weight: Bold;
			color: #888888;
		}

		.active {
			color: #33c980;
			background: #fff;
		}

		.active image {
			transform: rotate(180deg);
			background: none;
		}

		image {
			width: 25rpx;
			height: 25rpx;
			vertical-align: middle;
			margin-left: 5px;
		}
	}

	.tabLayer {
		// height: 90rpx;
		// line-height: 90rpx;
		// display: flex;
		// justify-content: space-between;
		padding: 31rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 26rpx;
		align-items: center;
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
		// flex-wrap: wrap;


		text {
			display: inline-block;
			// width: calc(100%/3-31rpx);
			width: calc((100% - 62rpx - 62rpx)/3);
			height: 60rpx;
			border: 1rpx solid #999;
			line-height: 60rpx;
			text-align: center;
			border-radius: 16rpx;
			margin-bottom: 31rpx;
			margin-right: 31rpx;
			overflow: hidden;
			// white-space: normal;
			white-space: pre;
			text-overflow: ellipsis;
			padding: 0 10rpx;
			box-sizing: border-box;

			&:last-child {
				margin-right: 0;
			}
		}

		.active {
			color: #39B19D;
			border-color: #39B19D;
		}
	}

	.container_list {
		background: #fff;
		padding: 0 31rpx;
		box-sizing: border-box;

		.list_item {
			width: 100%;
			min-height: 308rpx;
			// height: auto;
			display: flex;
			border: 1px solid rgba(204, 204, 204, 0.2);

			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
			padding: 10rpx 0;

			margin-bottom: 30rpx;

			.list_item_img {
				// background: skyblue;
				width: 223rpx;
				height: 100%;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				position: relative;
				margin-right: 19rpx;
				// overflow: hidden;
				flex-shrink: 0;

				// image {
				// 	width: 100%;
				// 	// height: 100%;
				// }
				/deep/ .u-image {
					width: 223rpx !important;
					height: 308rpx !important;
					border-radius: 16rpx 16rpx 16rpx 16rpx !important;
					// overflow: hidden !important;
				}

				/deep/ .u-image__image {
					width: 223rpx !important;
					height: 308rpx !important;
					border-radius: 16rpx 16rpx 16rpx 16rpx !important;
				}

				/deep/ .u-image__error {
					width: 223rpx !important;
					height: 308rpx !important;
					border-radius: 16rpx 16rpx 16rpx 16rpx !important;
				}

				/deep/ .u-image__loading {
					width: 223rpx !important;
					height: 308rpx !important;
					border-radius: 16rpx 16rpx 16rpx 16rpx !important;
				}


				text {
					display: inline-block;
					position: absolute;
					bottom: 0%;
					left: 0%;
					background: rgba(47, 177, 157, 0.43);
					height: 44rpx;
					width: 100%;
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					color: #fff;
					text-align: center;
					line-height: 44rpx;
				}
			}

			.list_item_info {
				width: 100%;
				// height: 100%;
				height: auto;

				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				// background-color: palevioletred;
				.info_name {
					font-size: 30rpx;
					line-height: 40rpx;
					color: #000;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: space-between;

					._mobile {
						padding: 4rpx 10rpx;
						background-color: #39B19D;
						color: #fff;
						border-radius: 10rpx;
						box-sizing: border-box;
						// margin-right: 30rpx;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							// margin-right: 20rpx;
						}
					}
				}

				.info_label {
					display: flex;
					flex-wrap: wrap;
					// overflow: hidden;
					max-height: 308rpx;
					overflow: scroll;
					// text-overflow: ellipsis;

					view {
						padding: 5rpx 12rpx;
						box-sizing: border-box;
						color: #39B19D;
						border: 1rpx solid #39B19D;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						margin: 0 15rpx 10rpx 0;
						font-size: 26rpx;
					}
				}

				.info_address,
				.info_time {
					height: 28rpx;
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					margin-top: 15rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					text {
						font-size: 30rpx;
						color: #000;
						max-width: 400rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.btns {
					display: flex;
					align-items: center;
					// margin-top: 10rpx;
					// position: absolute;
					// bottom: 0;

					.btns_distance {
						color: #39B19D;
						font-size: 30rpx;
						border: 1rpx solid #39B19D;
						border-radius: 16rpx;
						// padding: 7rpx 5rpx;
						display: inline-block;
						width: 148rpx;
						height: 51rpx;
						line-height: 51rpx;
						text-align: center;
						margin-right: 42rpx;
						padding: 0 10rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.btns_book {
						display: inline-block;
						width: 139rpx;
						height: 51rpx;
						line-height: 51rpx;
						color: #fff;
						font-size: 30rpx;
						background: #39B19D;
						border-radius: 16rpx;
						text-align: center;
						margin-right: 37rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		/deep/ .u-modal__content__text {
			font-size: 30rpx !important;
			text-align: center !important;
		}
	}

	/deep/.uni-popup .uni-popup_wrapper {
		width: 80% !important;
	}

	.tabbar_icon {
		width: 50rpx;
		height: 50rpx;
	}

	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}

	/deep/ .u-tabbar__content__item-wrapper {
		height: 120rpx !important;
	}
</style>